<template>
    <div class="wait-guide" id="wait-guide">
        <div class="wait-guide-top">
            <wait-time v-show="!isGuide" :restSecond="startRest" @cancelValue="cancelFn()"></wait-time>
            <use-car-info v-show="isGuide" :useCarInfo="useCarInfo"></use-car-info>
        </div>
        <!-- 中间地图 -->
        <!--<c-map class="my-map"></c-map>-->
        <div class="my-map" id="mymap"></div>
        <!-- 底部 -->
        <div class="wait-guide-btm">
            <div class="wait-guide-car">
                <img :src="waitCarInfo.carImg" v-show="!isGuide" alt="">
                <img :src="useCarInfo.carImg" v-show="isGuide" alt="">
                <span v-text="waitCarInfo.plateNum">京Q0T8K3</span>
                <span :style="{backgroundImage: 'url(' + batteryImg + ')', backgroundSize:'100% 100%'}"></span>
                <span v-text="waitCarInfo.enmileage">250公里</span>
                <span v-show="isGuide" @click="showGuide()">驾驶指南</span>
            </div>
            <div class="wait-guide-parking">
                <p>取车点<span v-text="returnCarInfo.parkingName"></span></p>
                <p v-text="returnCarInfo.parkingAddress"></p>
                <!-- <div class="wait-guide-more" @click="chooseParkingGet()">更多</div> -->
            </div>
            <div class="wait-guide-btns">
                <button class="whistle" type="button" v-show="!isGuide" @click="soundWhistle()">鸣笛</button>
                <button class=" btn-normal trumpet" type="button" v-show="isGuide" @click="soundWhistle()">透明</button>
                <button class=" btn-normal lock" type="button" v-show="isGuide" @click="lockCar()">透明</button>
                <button class=" btn-normal unlock" type="button" v-show="isGuide" @click="unlockCar()">透明</button>
                <button class="use-car" type="button" v-show="!isGuide" @click="startUse()">开始用车</button>
                <button class="back-car" type="button" v-show="isGuide">还车</button>
            </div>
        </div>
        <!-- 弹窗 -->
        <div class="wait-guide-model" v-show="modelVisible">
            <cancel-order v-show="cancelVisible" :cancelInfo="waitCarInfo" @closeCancelModel="closeCancel()"></cancel-order>
            <guide-model123 v-show="guideModel123" @closeModel="closeModel()"></guide-model123>
            <guide-model4 v-show="guideModel4" @closeModelAll="closeModelAll()"></guide-model4>
            <parking-fee v-show="feeVisible" :cancelInfo="waitCarInfo" @feeClose="feeModelClose()"></parking-fee>
        </div>
    </div>
</template>

<script>
import qs from "qs"
import WaitTime from "../components/WaitTime"
import UseCarInfo from "../components/UseCarInfo"
import CancelOrder from "./CancelOrder"

//import CMap from "./CMap"
import GuideModel123 from "./GuideModel123"
import GuideModel4 from "./GuideModel4"
import ParkingFee from "./ParkingFee"
export default {
    components: {
        WaitTime,
        UseCarInfo,
        CancelOrder,

//        CMap,
        GuideModel123,
        GuideModel4,
        ParkingFee,
    },
    mounted () {
        this.orderId = this.$route.query.orderId;
        console.log("orderId:", this.orderId);
        this.type = this.$route.query.type;

        if (this.type == 1) {
            this.isGuide = true;
            this.axios.post("/order/inUseDetail.json", qs.stringify({
                access_token: this.global.token,
                orderId: this.orderId,
            })).then(res => {
                console.log(res);
                if (res.data.code == 200) {
                    this.useCarInfo = res.data.modelData;
                    this.returnCarInfo = res.data.modelData.returnParking;
                    this.waitCarInfo = res.data.modelData;
                    this.mapready1()
                }
            })
        } else {
          // 等车信息
          this.axios.post("/order/wait.json", qs.stringify({
            access_token: this.global.token,
            orderId: this.orderId,
          })).then(res => {
            if (res.data.code == 200) {
              console.log(res.data.modelData)
              this.waitCarInfo = res.data.modelData;
              this.cancelInfo.orderId = res.data.modelData.orderId;
              this.cancelInfo.restCount = res.data.modelData.restCount;
              this.startRest = res.data.modelData.startRest;
              console.log(this.waitCarInfo.startRest);
              let power = parseInt(res.data.modelData.power/10);
              this.batteryImg = "./static/image/img_energy_lv" + power + ".png";
              this.mapready()
            }
          })
        }
    },
    methods: {
        mapready () {
          var _this=this
          console.log(sessionStorage.positionLon, sessionStorage.positionLat)
          var mp = new BMap.Map('mymap')
          mp.setMapStyle({ styleJson: this.global.mapStyle })
          var p1 = new BMap.Point(sessionStorage.positionLon, sessionStorage.positionLat)
          mp.centerAndZoom(p1, 14)
          var p2 = new BMap.Point(_this.waitCarInfo.parkingLon,_this.waitCarInfo.parkingLat)
          var driving = new BMap.DrivingRoute(mp, {renderOptions: {map: mp, autoViewport: true}})
          driving.search(p1, p2);
          mp.enableScrollWheelZoom(true)
          mp.enableDoubleClickZoom(true)
  //         复杂的自定义覆盖物
          function ComplexCustomOverlay (point, carcount, parkingId, spantext, parkingName, parkingAddress, parkinglat, _parkinglon, parkingkind) {
            this._point = point
            this._text = carcount
            this._spantext = spantext
            this._parkingId = parkingId
            this._parkname = parkingName
            this._parkingAddress = parkingAddress
            this._parkinglat = parkinglat
            this._parkinglon = _parkinglon
            this._parkingKind = parkingkind
          }
        ComplexCustomOverlay.prototype = new BMap.Overlay()
        ComplexCustomOverlay.prototype.initialize = function (map) {
          this._map = map;
          var div = this._div = document.createElement("div")
          div.style.width = "30px"
          div.style.height = "30px"
          div.style.fontSize = "14px"
          div.style.lineHeight = "30px"
          div.className = "mappoint1"
          div.setAttribute('data-parkingId', this._parkingId)
          div.setAttribute('data-carCount', this._text)
          div.setAttribute('data-parkname', this._parkname)
          div.setAttribute('data-spantext', this._spantext)
          div.setAttribute('data-parkingAddress', this._parkingAddress)
          div.setAttribute('data-parkinglat', this._parkinglat)
          div.setAttribute('data-parkinglon', this._parkinglon)
          div.setAttribute('data-parkingkind', this._parkingKind)
          div.innerHTML = this._text
          var span = this._span = document.createElement("span")
          span.className = "mapspan1"
          span.style.width = "60px"
          span.style.height = "20px"
          span.style.fontSize = "12px"
          span.style.lineHeight = "20px"
          span.innerHTML = this._spantext
          div.appendChild(span)
          mp.getPanes().labelPane.appendChild(div)
          return div
        }
        ComplexCustomOverlay.prototype.draw = function () {
          var map = this._map;
          var pixel = map.pointToOverlayPixel(this._point)
          this._div.style.left = pixel.x - 15 + "px"
          this._div.style.top  = pixel.y - 15 + "px"
        }
        mp.addOverlay(new ComplexCustomOverlay(new BMap.Point(sessionStorage.positionLon, sessionStorage.positionLat), '', 'userlocation', 1, 1, 1, 1, 1, 1))
          mp.addOverlay(new ComplexCustomOverlay(new BMap.Point(_this.waitCarInfo.parkingLon,_this.waitCarInfo.parkingLat), 'P', 'userlocation1', '距离您 '+ _this.waitCarInfo.distanceDesc, 1, 1, 1, 1, 1))
      },
        mapready1 () {
        var _this=this
        console.log(sessionStorage.positionLon, sessionStorage.positionLat)
        var mp = new BMap.Map('mymap')
        mp.setMapStyle({ styleJson: this.global.mapStyle })
        var p1 = new BMap.Point(sessionStorage.positionLon, sessionStorage.positionLat)
        mp.centerAndZoom(p1, 14)
        var p2 = new BMap.Point(_this.waitCarInfo.returnParking.parkingLon,_this.waitCarInfo.returnParking.parkingLat)
        var driving = new BMap.DrivingRoute(mp, {renderOptions: {map: mp, autoViewport: true}})
        driving.search(p1, p2);
        mp.enableScrollWheelZoom(true)
        mp.enableDoubleClickZoom(true)
        //         复杂的自定义覆盖物
        function ComplexCustomOverlay (point, carcount, parkingId, spantext, parkingName, parkingAddress, parkinglat, _parkinglon, parkingkind) {
          this._point = point
          this._text = carcount
          this._spantext = spantext
          this._parkingId = parkingId
          this._parkname = parkingName
          this._parkingAddress = parkingAddress
          this._parkinglat = parkinglat
          this._parkinglon = _parkinglon
          this._parkingKind = parkingkind
        }
        ComplexCustomOverlay.prototype = new BMap.Overlay()
        ComplexCustomOverlay.prototype.initialize = function (map) {
          this._map = map;
          var div = this._div = document.createElement("div")
          div.style.width = "30px"
          div.style.height = "30px"
          div.style.fontSize = "14px"
          div.style.lineHeight = "30px"
          div.className = "mappoint1"
          div.setAttribute('data-parkingId', this._parkingId)
          div.setAttribute('data-carCount', this._text)
          div.setAttribute('data-parkname', this._parkname)
          div.setAttribute('data-spantext', this._spantext)
          div.setAttribute('data-parkingAddress', this._parkingAddress)
          div.setAttribute('data-parkinglat', this._parkinglat)
          div.setAttribute('data-parkinglon', this._parkinglon)
          div.setAttribute('data-parkingkind', this._parkingKind)
          div.innerHTML = this._text
          var span = this._span = document.createElement("span")
          span.className = "mapspan1"
          span.style.width = "60px"
          span.style.height = "20px"
          span.style.fontSize = "12px"
          span.style.lineHeight = "20px"
          span.innerHTML = this._spantext
          div.appendChild(span)
          mp.getPanes().labelPane.appendChild(div)
          return div
        }
        ComplexCustomOverlay.prototype.draw = function () {
          var map = this._map;
          var pixel = map.pointToOverlayPixel(this._point)
          this._div.style.left = pixel.x - 15 + "px"
          this._div.style.top  = pixel.y - 15 + "px"
        }
        mp.addOverlay(new ComplexCustomOverlay(new BMap.Point(sessionStorage.positionLon, sessionStorage.positionLat), '', 'userlocation', 1, 1, 1, 1, 1, 1))
        mp.addOverlay(new ComplexCustomOverlay(new BMap.Point(_this.waitCarInfo.returnParking.parkingLon,_this.waitCarInfo.returnParking.parkingLat), 'P', 'userlocation1', '距离您 '+ _this.waitCarInfo.returnParking.distanceDesc, 1, 1, 1, 1, 1))
      },
        cancelFn (val) {
            this.modelVisible = true;
            this.cancelVisible = true;
        },
        showGuide () {
            this.modelVisible = true;
            this.guideModel123 = true;
        },
        closeCancel () {
            this.cancelVisible = false;
            this.modelVisible = false;
        },
        closeModel () {
            this.guideModel123 = false;
            this.guideModel4 = true;
        },
        closeModelAll () {
            this.guideModel4 = false;
            this.modelVisible = false;
        },
        feeModelClose () {
            this.feeVisible = false;
            this.modelVisible = false;
        },
        chooseParkingGet () {
            alert("别点了，不一定做呢！");
        },
        startUse () {
            this.$router.push({path: "/settlement", query: {orderId: this.orderId, before: true}})
            // this.isGuide = true;

            // 仅供调试
            // this.modelVisible = true;
        },
        // 鸣笛
        soundWhistle () {
            this.axios.post("/car/light.json", qs.stringify({
                access_token: this.global.token,
                orderId: this.orderId
            })).then(res => {
                console.log(res.data.code);
                if (res.data.code == 200) {

                }
            })
        },
        // 锁车
        lockCar () {
            this.axios.post("/car/closeDoor.json", qs.stringify({
                access_token: this.global.token,
                orderId: this.orderId
            })).then(res => {
                console.log(res.data.code);
                if (res.data.code == 200) {

                }
            })
        },
        // 解锁
        unlockCar () {
            this.axios.post("/car/openDoor.json", qs.stringify({
                access_token: this.global.token,
                orderId: this.orderId
            })).then(res => {
                console.log(res.data.code);
                if (res.data.code == 200) {

                }
            })
        },
    },
    data () {
        return {
            // 订单号
            orderId: "",
            type: "",
            useCarInfo: {
                startRest: 60,
            },
            returnCarInfo: {},

            isGuide: true,
            isGuide: false,

            // 等车信息
            waitCarInfo: {},
            restCount: "",
            startRest: 60,

            // 弹窗
            modelVisible: true,
            modelVisible: false,
            // 取消订单
            cancelInfo: {},
            // cancelVisible: true,
            cancelVisible: false,
            cancelCount: 3,

            // 引导
            guideModel123: true,
            guideModel4: false,
            guideModel123: false,
            // guideModel4: true,
            //
            // 停车费
            // feeVisible: true,

            batteryImg: "",
            parkingName: "银河SOHO西侧地面停车场",
            parkingAddress: "北京市东城区南竹杆胡同银河SOHO西侧地面停车场",

            // 按钮信息
            listdata: [
                {"location": "西单", "park": "北京市东城区南竹杆胡同银河SOHO西侧地面停车场"},
                {"location": "西单", "park": "北京市东城区南竹杆胡同银河SOHO西侧地面停车场"},
                {"location": "西单", "park": "北京市东城区南竹杆胡同银河SOHO西侧地面停车场"}
            ],
        }
    }
 }
</script>

<style lang="scss">
    #wait-guide {
        width: 100%;
        height: 100%;
        background-color: #eee;
        position: absolute;
      .wait-guide-top {
        width: 100%;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 505;
      }
      .my-map {
        position: absolute;
        z-index: 500;

        width: 100%;
        height: 100%;
      }
      .wait-guide-btm {
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 505;

        width: 100%;
        background-color: #fff;
      }
      .wait-guide-car {
        width: 100%;
        height: 96px;
        padding: 12px 0 14px 10px;
        margin-bottom: 30px;
        border-bottom: 2px solid #f5f5f5;
      }
      .wait-guide-car span {
        display: inline-block;
      }
      .wait-guide-car img {
        display: inline-block;
        width: 140px;
        height: 70px;
        margin-right: 8px;
        /*background-color: #eee;*/
      }
      .wait-guide-car span:first-of-type {
        margin-right: 30px;
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #AAA;
        letter-spacing: 0;
      }
      .wait-guide-car span:nth-of-type(2) {
        width: 87px;
        height: 16px;
        margin-right: 13px;
        /*background-color: #ddd;*/
      }
      .wait-guide-car span:nth-of-type(3) {
        font-family: PingFangSC-Regular;
        font-size: 22px;
        color: #aaa;
        letter-spacing: 0;
      }
      .wait-guide-car span:nth-of-type(4) {
        margin-left: 134px;

        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #0db95f;
        letter-spacing: 0;
      }
      .wait-guide-parking {
        position: relative;
      }
      .wait-guide-more {
        position: absolute;
        top: 12px;
        left: 634px;

        width: 87px;
        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #aaa;
        letter-spacing: 0;
      }
      .wait-guide-more:after {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        border-color: #e6e6e6 #e6e6e6 transparent transparent;
        border-style: solid;
        border-width: 4px;
        transform: rotate(45deg);

        position: absolute;
        top: 10px;
        right: 0;
      }
      .wait-guide-btm p {
        text-indent: 64px;

        font-family: PingFangSC-Regular;
        font-size: 22px;
        color: #aaa;
        letter-spacing: 0;
      }
      .wait-guide-btm p:first-of-type {
        position: relative;

        line-height: 37px;
        margin-bottom: 9px;
        font-size: 24px;
      }
      .wait-guide-btm p:first-of-type:before {
        content: "";
        display: block;
        width: 14px;
        height: 14px;
        background: #09c16A;
        border-radius: 50%;

        position: absolute;
        top: 11px;
        left: 30px;
      }
      .wait-guide-btm p:first-of-type span {
        margin-left: 28px;
        font-size: 26px;
        color: #333;
      }
      .wait-guide-btm p:last-of-type {
        line-height: 30px;
        margin-bottom: 38px;
      }
      .wait-guide-btns {
        height: 100px;
        padding: 0 30px;
        margin-bottom: 30px;
      }
      .wait-guide-btns button {
        height: 100px;
        margin-right: -1px;
        border-radius: 50px;
      }
      .whistle {
        width: 260px;
        text-indent: 60px;

        background: #f5f5f5 url(../../static/image/icon_ring.png) 60px 30px no-repeat;
        -webkit-background-size: 44px 36px;
        background-size: 44px 36px;

        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #999;
        letter-spacing: 0;
      }
      .trumpet {
        background: #f5f5f5 url(../../static/image/icon_ring.png) center center no-repeat;
      }
      .lock {
        background: #f5f5f5 url(../../static/image/icon_lock.png) center center no-repeat;
      }
      .unlock {
        background: #f5f5f5 url(../../static/image/icon_unlock.png) center center no-repeat;
      }
      .btn-normal {
        width: 100px;
        background-size: 44px 36px;
        color: transparent;
      }
      .use-car {
        width: 400px;
        background: #0db95f;
        text-indent: -32px;

        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #fff;
        letter-spacing: 0;
      }
      .back-car {
        width: 320px;
        padding-right: 20px;
        background: #0db95f;
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #fff;
        letter-spacing: 0;
      }
      .wait-guide-model {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 510;
        background-color: transparent;
      }
    }

    #mymap{
      /*width:100%;*/
      /*height:666px;*/
      .mappoint1{
      position: absolute;
      z-index: 24;
      text-align: center;
      background: url("../../static/image/img_dot_bg.png");
      -webkit-background-size: cover;
      background-size: cover;
      color: #fff;
      font-weight:bold;
    }
      .mappoint1[data-parkingid='userlocation']{
        background: #3EB2F9;
        border: 5px solid #FFFFFF ;/*no*/
        box-shadow: 0 4px 10px 0 rgba(36,112,156,0.20);/*no*/
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        width:30px !important;/*no*/
        height:30px !important;/*no*/
        -webkit-animation: change 1s infinite;
        -o-animation: change 1s infinite;
        animation: change 1s infinite;
        .mapspan1{
          display: none;
        }
      }
      .mapspan1{
        background: #FFFFFF;
        box-shadow: 0 10px 20px 0 rgba(0,0,0,0.05);/*no*/
        font-size: 22px;/*no*/
        color: #333333;
        letter-spacing: 0;
        position: absolute;
        left:-113%;
        top:-110%;
        text-align: center;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        z-index:9999;
        /*padding:5px 10px;*/
        width:100px !important;/*no*/
        height:30px !important;/*no*/
        line-height:30px !important;/*no*/
      }
    }
    .BMap_Marker{
      background: transparent !important;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%;
      width:30px /*no*/ ;
      height:30px /*no*/;
      left:-17px /*no*/;
      top:64px /*no*/;
      display: none;

    }
    @keyframes change {
      0%,100%{
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
      }
      50%{
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
      }
    }
</style>
